<template>
  <div class="about-container">
    <div class="about-content">
      <h1 class="page-title">今日排班情况</h1>

      <!-- 单一卡片设计 -->
      <div class="simple-card">
        <div class="card-content">
          <div class="status-icon">
            <van-icon
              :name="isOnDuty ? 'warning' : 'smile-o'"
              :size="32"
              :color="isOnDuty ? '#52c41a' : '#8ec42f'"
            />
          </div>
          <div class="greeting">您好，{{ userName }}</div>
          <div class="status-text">{{ isOnDuty ? '今日需要值班' : '今日无需值班' }}</div>
          <div class="date-text">{{ currentDate }}</div>
        </div>
        <!-- <div class="card-footer">
          <van-icon name="arrow-down" size="16" color="#ccc" />
          <van-icon name="location-o" size="16" color="#8ec42f" />
        </div> -->
      </div>

      <!-- 排班信息部分 -->
      <div class="schedule-info">
        <div class="schedule-item">
          <span class="schedule-label">今日值班人员</span>
          <span class="schedule-value">朱小甜</span>
        </div>
        <div class="schedule-item">
          <span class="schedule-label">下次值班</span>
          <span class="schedule-value">周五</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '../stores/user'
import { Icon as VanIcon } from 'vant'

// 获取用户状态管理
const userStore = useUserStore()

// 响应式数据
const todayStaff = ref<any[]>([])
const isOnDuty = ref(false)
const cardClickCount = ref(0)

// 计算属性
const currentDate = computed(() => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][now.getDay()]
  return `${year}年${month}月${day}日 ${weekday}`
})

const formattedDate = computed(() => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
})

const userInfo = computed(() => {
  return userStore.getDingUserInfo() || { name: '未知用户', position: '未知职位' }
})

const userName = computed(() => userInfo.value.name || '未知用户')
const userPosition = computed(() => userInfo.value.position || '未知职位')

// 检查今日是否排班
const checkTodayShift = () => {
  try {
    // 从localStorage获取今日排班数据
    const shiftData = localStorage.getItem(`shift_${formattedDate.value}`)
    if (shiftData) {
      const staffList = JSON.parse(shiftData)
      todayStaff.value = staffList

      // 检查当前用户是否在排班列表中
      isOnDuty.value = staffList.some(
        (staff: any) => staff.id === userInfo.value.id || staff.name === userName.value,
      )
    } else {
      todayStaff.value = []
      isOnDuty.value = false
    }
  } catch (error) {
    console.error('获取排班数据失败:', error)
    todayStaff.value = []
    isOnDuty.value = false
  }
}

// 状态卡片点击事件
const statusCardClick = () => {
  cardClickCount.value++
  // 可以添加点击效果或其他交互
}

// 页面挂载时检查排班情况
onMounted(() => {
  checkTodayShift()

  // 添加页面加载动画
  document.querySelector('.about-container')?.classList.add('loaded')
})
</script>

<style scoped>
/* 全局样式 */
.about-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 内容区域 */
.about-content {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px;
  flex: 1;
  position: relative;
  z-index: 2;
}

/* 页面标题 */
.page-title {
  color: white;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  padding: 10px;
}

/* 单一卡片设计 */
.simple-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.status-icon {
  margin-bottom: 15px;
}

.greeting {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.status-text {
  font-size: 18px;
  color: #333;
  font-weight: 500;
  margin-bottom: 8px;
}

.date-text {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

/* 排班信息部分 */
.schedule-info {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.schedule-item {
  background: rgba(255, 255, 255, 0.103);
  border-radius: 12px;
  padding: 15px 20px;
  flex: 1;
  margin: 0 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.schedule-label {
  font-size: 14px;
  color: #ffffffbb;
  display: block;
  margin-bottom: 5px;
}

.schedule-value {
  font-size: 18px;
  color: #22d3ee;
  font-weight: 500;
}
</style>
